<template>
	<view class="myTeam">
		<view class="f f_align f_align_center t_stiacte">
			<view class="t_warps b">
				<view class="bold">{{userInfo.directCount}}</view>
				<view class="">直推人数</view>
			</view>
			<view class="t_warps">
				<view class="bold">{{userInfo.totalSubordinate}}</view>
				<view class="">团队人数</view>
			</view>
		</view>

		<view class="list_Warps_row">
			<view class="list_Warps_row_i f f_align f_align_center" v-for="(item,index) in myTeams" :key="index">
				<view class="f f_align_center">
					<view class="head_img">
						<image :src="item.userHeadUrl" class="autoImg" mode=""></image>
					</view>
					<view class="f f_column f_align">
						<view class="bold u_name">{{item.userName}}</view>
						<view class="u_id">ID:{{item.invitation}}</view>
					</view>
				</view>
				<view class="">
					{{item.createTime}}
				</view>
			</view>
		</view>

		<!-- 加载 -->
		<loadMore :isLoading="isLoading" :isDone="isDoneTask" />
	</view>
</template>

<script>
	import loadMore from '@/components/loadMore/loadMore';
	import { mapState } from 'vuex';
	export default {
		components:{
			loadMore
		},
		data() {
			return {
				isLoading:false,
				isDoneTask:false,

				myTeams:[],
				page:{
					pageIndex:1,
					limit:10,
					totalPage:0
				},
				userInfo:{
					directCount:0,
					totalSubordinate:0
				}
			};
		},
		onShow() {
			this.getUserInfo();
			this.getMyteams();
		},
		methods:{
			//获取用户信息哦
			async getUserInfo(){
				const _this = this;
				let res = (await _this.$http('/api/auth/user/getUserInfo','POST',{})).data;
				uni.stopPullDownRefresh();
				if(res && res.code == '0'){
					let userInfo = res.data;
					_this.userInfo = userInfo;
					uni.setStorageSync('userInfo',userInfo);
				}
			},
			//查询团队列表
			async getMyteams(){
				const _this = this;
				_this.isLoading = true;
				_this.isDoneTask = false;

				let res = (await _this.$http('/api/auth/user/listUserTeam','POST',{
					page:_this.page.pageIndex,
					limit:_this.page.limit
				})).data;
				uni.stopPullDownRefresh();
				_this.isLoading = false;
				if(res && res.code == '0'){
					let list = res.data.list;
					_this.page.totalPage = res.data.totalPage;
					if(_this.page.pageIndex <= 1){
						_this.myTeams.splice(0);
					}
					if(_this.page.totalPage <= _this.page.pageIndex){
						_this.isDoneTask = true;
					}else{
						_this.isDoneTask = false;
					}
					_this.myTeams = _this.myTeams.concat(list);
				}else{
					_this.$showToast(res.msg);
				}
			}
		},
		onPullDownRefresh() {
			this.page.pageIndex = 1;
			this.getMyteams();
		},
		//滚动到底部
		onReachBottom() {
			const _this =this;
			if(_this.page.pageIndex < _this.page.totalPage){
				_this.page.pageIndex++;
				_this.getMyteams();
			}else{
				_this.isDoneTask = true;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.myTeam{
		width: 100%;
		min-height: 100vh;
		background-color: #F6F6F6;
		padding-top: 1rpx;
		.t_stiacte{
			position: sticky;
			top:0;
			background-color: #E6E6E6;
		}
		.t_warps{
			box-sizing: border-box;
			width: 375rpx;
			height: 220rpx;
			color: #fff;
			background: url('/static/image/bg_r@2x.png') no-repeat center;
			background-size: 100% 100%;
			padding: 50rpx 0 0 70rpx;
			margin-bottom: 12rpx;
			&.b{
				background: url('/static/image/bg_b@2x.png') no-repeat center;
				background-size: 100% 100%;
			}
			font-size: 28rpx;
			.bold{
				font-size: 44rpx;
			}
		}
		.list_Warps_row{
			padding: 0 24rpx;
			background-color: #fff;
			.list_Warps_row_i{
				padding: 32rpx 0;
				border-bottom: solid 1rpx #E6E6E6;
				font-size: 24rpx;
				.head_img{
					width: 82rpx;height: 82rpx;
					margin-right: 12rpx;
					image{
						border-radius: 50%;
					}
				}
				.u_name{
					font-size: 32rpx;
					margin-bottom: 4rpx;
				}
				.u_id{color: #999;}
			}
		}
	}
</style>
